<template>
  <div>
      <HomeHeader></HomeHeader>
      <HomeSwiper :list="swiperList"></HomeSwiper>
      <HomeIcons :icon="iconList"></HomeIcons>
      <Home-Recommend :list="recommendList"></Home-Recommend>
      <Home-Weekend :list="weekendList"></Home-Weekend>
  </div>
</template>

<script>
import HomeHeader from './components/Header.vue'
import HomeSwiper from './components/Swiper.vue'
import HomeIcons from './components/Icons.vue'
import HomeRecommend from './components/Recommend.vue' 
import HomeWeekend from './components/Weekend.vue'
import axios from 'axios'
import { mapState } from 'vuex'
export default {
    name:'HOME',
    components:{
      HomeHeader,
      HomeSwiper,
      HomeIcons,
      HomeRecommend,
      HomeWeekend
    },
    data(){
    return{
      
      swiperList:[],
      iconList:[],
      recommendList:[],
      weekendList:[],
      lastCity:''
    }
    },
    computed:{
      ...mapState(['city'])
    },
    methods:{
      getHomeInfo(){
        axios.get('/api/index.json?city' + this.city)
          .then(this.getHomeInfoSucc)
      },
      getHomeInfoSucc(res){  
        if(res.status==200){
          res = res.data
          this.swiperList =res.data.swiperList
          this.iconList =res.data.iconList
          this.recommendList= res.data.recommendList
          this.weekendList=res.data.weekendList
          
        }
      }
    },
    mounted(){
      this.lastCity = this.city
      this.getHomeInfo()
    },
    activated(){
      if(this.lastCity !== this.city){
        this.lastCity = this.city
        this.getHomeInfo() 
      }
    }
}
</script>

<style>

</style>